<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!--
    行内(替换元素?) 可设置宽高
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element
    HTML 规范也说了 <input> 元素可替换，因为 "image" 类型的 <input> 元素就像 <img> 一样被替换。
    但是其他形式的控制元素，包括其他类型的 <input> 元素，被明确地列为非可替换元素（non-replaced element）
  -->
<!--
  input 元素 是替换元素，可以设置宽高
 input 元素 的 type 属性决定了它的类型
  type 属性
    text 文本
    password 密码
    radio 单选按钮
    checkbox 复选框
    submit 提交按钮
    reset 重置按钮
    button 按钮
    image 图片
    email 邮箱
    number 数字
    range 范围
    color 颜色
    search 搜索
    tel 电话
    url 网址
    time 时间
    date 日期
    file 文件选择
    readonly 只读
    disabled 禁用
    autofocus 自动聚焦
    autocomplete 自动完成
    maxlength 最大长度
    minlength 最小长度
    pattern 正则表达式
    required 必填
    value 默认值
    placeholder 占位符
    checked 默认选中
    multiple 多选
    size 大小
    step 步长
    max 最大值
    min 最小值
    list 列表
    name 名称
    id 唯一标识
    form 表单

    布尔属性
        布尔属性不需要设置值，只需要设置即可
        例如：
        <input type="text" readonly> 等同于 <input type="text" readonly="readonly">
      disabled
      checked
      autofocus
      autocomplete
      required
      multiple
      readonly
      selected
      hidden


    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input
-->
  <div>
    <input type="text">
  </div>
  <div>
    <input type="password">
  </div>
  <div>
    <input type="time">
  </div>
  <div>
    <input type="date">
  </div>
  <div>
    <input type="file">
  </div>

  <input type="text" readonly>
  <!-- 两种写法等效   -->
  <input type="text" readonly="readonly">
  <input type="text" disabled>

  <input type="text" autofocus>

</body>
</html>